*{
  margin: 0;
  padding: 0;
  list-style: none;
}
::-webkit-scrollbar {display:none};
html{
  height: 100%;
  overflow-y: scroll;
}
a{
  text-decoration: none;
  color: #2f2f2f;
}
body{
  height: 100%;
}

#root{
  height: 100%;
}

#root>div{
  height: 100%;
}
#Frist{
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;

  .br{
    border: 1px solid red;
  }
  .wt{
    font-size: 12px;
    margin-top: -5px;
  }






.top{
    width: 100%;
    height: 70px;
    position: fixed;
    z-index: 999;
    background-color: #f0f0f0;
  .logo_1{
    position: absolute;
    width: 50px;
    left: 3%;
    height: 50px;
    text-align: center;
    border-radius: 45px;
    margin-top: 10px;
  }
  .logo_2{
    position: absolute;
    width: 50px;
    left: 18%;
    height: 50px;
    text-align: center;
    border-radius: 45px;
    margin-top: 10px;
  }
  .search{
    position: absolute;
    width: 220px;
    left: 36%;
    height: 30px;
    text-align: center;
    border-radius: 10px;
    margin-top: 20px;
  }
  .search>i{
    float: left;
    width: 10px;
    z-index: 20;
    height: 30px;
    font-size: 20px;
    line-height: 31px;
    margin-left: 10px
  }
  .search>input{
    float: left;
    width: 180px;
    z-index: 20;
    height: 30px;
    line-height: 27px;
    border-style:none;
    margin-left: 15px;
    outline:none;
    background: none;
  }
  }


.main{
  width: 100%;
  height: 0;
  flex-grow: 1;
  //background-color: #ff6b4f;
  .container{
    width: 375px;
    height: 140px;
    position: relative;
    overflow: auto;
    margin: 0 auto;
  }
  .f_lunbotu{
    width: 2625px;
    height: 140px;
    top: 0;
    left: 0;
    position: absolute;



    img{
      float: left;
      width: 375px;
      height: 140px;
      list-style: none;
    }
  }
  .buttons{
    position: absolute;
    width: 80px;
    height: 10px;
    z-index: 10;
    bottom: 10px;
    left: 147.5px;
  span{
      float: left;
      border-radius: 50%;
      height: 10px;
      width: 10px;
      margin-left: 5px;
      background: #f0f0f0;
    }
    .on{
      background: rebeccapurple;
    }
  }
  .mainbav{
    width:375px ;
    height: 230px;
    position: relative;
    overflow: auto;
  }
  .subnav_1{
    float: left;
    width: 375px;
    height: 200px;
    position: absolute;
    display: flex;
    justify-content: space-around;
    text-align: center;
    flex-wrap:wrap;
    li{
      width: 90px;
      height: 95px;
    }
    i{
      line-height: 85px;
    }
    p{
      margin-top: -32px;
    }
  }
  .subnav_2{
    float: left;
    width: 375px;
    height: 200px;
    left: 375px;
    position: absolute;
    display: flex;
    justify-content: space-around;
    text-align: center;
    flex-wrap:wrap;
    li{
      //list-style:none;
      width: 90px;
      height: 95px;
    }
    i{
      line-height: 85px;
    }
    p{
      margin-top: -32px;
    }
  }
  .subnav_3{
    float: left;
    width: 375px;
    height: 200px;
    left:750px;
    position: absolute;
    display: flex;
    justify-content: space-around;
    text-align: center;
    flex-wrap:wrap;
    li{
      //list-style:none;
      width: 90px;
      height: 95px;
    }
    i{
      line-height: 85px;
    }
    p{
      margin-top: -32px;
    }
  }
  .buttons_m1 {
    position: absolute;
    width: 50px;
    height: 10px;
    z-index: 10;
    bottom: 10px;
    left: 162.5px;
    span{
      float: left;
      border-radius: 50%;
      height: 10px;
      width: 10px;
      margin-left: 5px;
      background: #f0f0f0;
    }
    .on{
      background: rebeccapurple;
    }
  }
  .buttons_m2 {
    position: absolute;
    width: 50px;
    height: 10px;
    z-index: 10;
    bottom: 10px;
    left: 162.5px;
    margin-left: 375px;
    span{
      float: left;
      border-radius: 50%;
      height: 10px;
      width: 10px;
      margin-left: 5px;
      background: #f0f0f0;
    }
    .on{
      background: rebeccapurple;
    }
  }
  .buttons_m3 {
    position: absolute;
    width: 50px;
    height: 10px;
    z-index: 10;
    bottom: 10px;
    left: 162.5px;
    margin-left: 750px;
    span{
      float: left;
      border-radius: 50%;
      height: 10px;
      width: 10px;
      margin-left: 5px;
      background: #f0f0f0;
    }
    .on{
      background: rebeccapurple;
    }
  }
  .submenu{
    position: relative;
    width: 375px;
    height: 160px;
    overflow: auto;
    .sub{
      position: absolute;
      width: 1100px;
      height: 100%;
    }
    .s_menu{
      float: left;
      display: block;
      width: 330px;
      height: 130px;
      margin: 10px 5px 10px 5px;
    .nu_1{
      width: 310px;
      height: 60px;
      margin: 10px 9px 0px 9px;
      .nu_l{
        float: left;
        width: 40px;
        height: 40px;
        border-radius: 50px;
      }
      .nu_m{
        float: left;
        width: 210px;
        height: 60px;
        margin-left: 5px;
        .nu_m1{
          font-size: 20px;
          width: 100%;
          height: 50%;
        }
        .nu_m2{
          width: 100%;
          height: 40%;
          margin-top: 2%;
          display: flex;
          justify-content: space-between;
          .m2 {
            background-color: darkgray;
          }
        }

      }
      .nu_r{
        float: right;
        width: 40px;
        height: 25px;
        background-color: red;
        color: #f0f0f0;
        text-align: center;
      }
    }
    .nu_2{
      width: 280px;
      height: 45px;
      margin: 5px auto;
      .nu2_l{
        float: left;
        width: 20px;
        height: 40px;
      }
      .nu2_r{
        float: left;
        width: 235px;
        height: 40px;
      }
    }
    }
  }

}


.bottom-nav{
  width: 375px;
  height: 51px;
  //position: fixed;
  display: flex;
  justify-content: space-between;
  text-align: center;
  line-height: 50px;
  .b-nav{
    width: 20%;
    height: 100%;

  }
}

.bottom-message{
  width: 375px;
  height: 1200px;
  position: relative;
}
  .b_list_1{
    width: 375px;
    height: 1200px;
    z-index: 999;
    position: absolute;
    .b_message{
      float: left;
      width: 375px;
      height: 220px;
      .bm_top{
        width: 100%;
        height: 50px;
        .bmt_l{
          float: left;
          margin-left: 15px;
          margin-top: 10px;
          height: 25px;
          width: 25px;
          border-radius:25px;
        }
        .bmt_r{
          float: left;
          margin-left: 5px;
          margin-top: 10px;
          height: 25px;
          width: 50px;
          text-align: center;
        }
      }
      .bm_main{
        width: 355px;
        height: 125px;
        margin-left: 10px;
        .bm_main_2{
          float: left;
          width: 215px;
          height: 125px;
          display: block;
          .bmm_t{
            width: 215px;
            height: 60px;
            word-wrap:break-word;
          }
        }
        .bm_main_3{
          float: left;
          width: 126px;
          height: 125px;
          margin-left: 10px;
        }
      }
      .bm_bottom{
        width: 100%;
        height: 40px;
        .bmb_l{
          float: left;
          width: 100px;
          height: 40px;
          margin-left: 10px;
          .bl{
            float: left;
            width: 50px;
            height: 25px;
            line-height: 40px;
          }
          .blk{
            float: left;
            width: 45px;
            height: 25px;
            margin-top: 7px;
            text-align: center;
            margin-right: 3px;

          }
        }
        .bmb_r{
          float: right;
          width: 75px;
          height: 40px;
          margin-right: 10px;
          .iconfont{
            float: left;
            line-height: 40px;
            width: 25px;
            margin-left: 5px;
          }
          .blg{
            float: left;
            width: 43px;
            height: 25px;
            line-height: 40px;
          }
        }
      }
    }
  }
  .b_list_2{
    width: 375px;
    height: 1200px;
    z-index: 888;
    position: absolute;
    .b_message{
      float: left;
      width: 375px;
      height: 220px;
      .bm_top{
        width: 100%;
        height: 50px;
        .bmt_l{
          float: left;
          margin-left: 15px;
          margin-top: 10px;
          height: 25px;
          width: 25px;
          border-radius:25px;
        }
        .bmt_r{
          float: left;
          margin-left: 5px;
          margin-top: 10px;
          height: 25px;
          width: 50px;
          text-align: center;
        }
      }
      .bm_main{
        width: 355px;
        height: 125px;
        margin-left: 10px;
        .bm_main_2{
          float: left;
          width: 215px;
          height: 125px;
          display: block;
          .bmm_t{
            width: 215px;
            height: 60px;
            word-wrap:break-word;
          }
        }
        .bm_main_3{
          float: left;
          width: 126px;
          height: 125px;
          margin-left: 10px;
        }
      }
      .bm_bottom{
        width: 100%;
        height: 39px;
        .bmb_l{
          float: left;
          width: 100px;
          height: 37px;
          margin-left: 10px;
          .bl{
            float: left;
            width: 50px;
            height: 25px;
            line-height: 40px;
          }
          .blk{
            float: left;
            width: 45px;
            height: 25px;
            margin-top: 7px;
            text-align: center;
            margin-right: 3px;

          }
        }
        .bmb_r{
          float: right;
          width: 75px;
          height: 37px;
          margin-right: 10px;
          .iconfont{
            float: left;
            line-height: 40px;
            width: 25px;
            margin-left: 5px;
          }
          .blg{
            float: left;
            width: 43px;
            height: 25px;
            line-height: 40px;
          }
        }
      }
    }
    .b_message_1{
      float: left;
      width: 375px;
      height: 240px;
      .bm_top{
        width: 100%;
        height: 50px;
        .bmt_l{
          float: left;
          margin-left: 15px;
          margin-top: 10px;
          height: 25px;
          width: 25px;
          border-radius:25px;
        }
        .bmt_r{
          float: left;
          margin-left: 5px;
          margin-top: 10px;
          height: 25px;
          width: 50px;
          text-align: center;
        }
      }

      .bm_main_4{
        width: 375px;
        height: 185px;
        .bmm_n{
          float: left;
          width: 170px;
          height: 165px;
          margin-left: 10px;
          .mn_t{
            width: 100%;
            height: 50px;
            .bmt_l{
              float: left;
              margin-left: 15px;
              margin-top: 10px;
              height: 25px;
              width: 25px;
              border-radius:25px;
            }
            .bmt_r{
              float: left;
              margin-left: 5px;
              margin-top: 10px;
              height: 25px;
              width: 50px;
              text-align: center;
            }
          }
          .mnb_t{
            width: 100%;
            height: 40px;
            color: #ff484a;
            .mnb_tl{
              float: left;
              width: 46%;
              height: 100%;
              line-height: 40px;
              margin-left: 5px;
              text-align: center;
            }
          }
          .mnb_m{
            width: 100%;
            height: 30px;
            .mnb_mt{
              float: left;
              width: 47%;
              height: 100%;
              margin-left: 5px;
              text-align: center;
            }
          }
          .mnb_b{
            float: left;
            width: 170px;
            height: 35px;

            .mnb_bk{
              width: 150px;
              margin: auto;
              height: 100%;
              line-height: 35px;
              color: #ff484a;
              text-align: center;
            }
          }
        }
      }
    }
  }
  .b_list_3{
    width: 375px;
    height: 1200px;
    z-index: 777;
    position: absolute;
    .b_message_2{
      float: left;
      width: 375px;
      height: 180px;
      .bm_main_1{
        width: 355px;
        height: 125px;
        margin-left: 10px;
        margin-top: 10px;
        .bm_main_2{
          float: left;
          width: 215px;
          height: 125px;
          display: block;
          .bmm_t{
            width: 215px;
            height: 60px;
            word-wrap:break-word;
          }
        }
        .bm_main_3{
          float: left;
          width: 126px;
          height: 125px;
          margin-left: 10px;
        }
      }
      .bm_bottom{
        width: 100%;
        height: 40px;
        .bmb_l{
          float: left;
          width: 100px;
          height: 36px;
          margin-left: 10px;
          .bl{
            float: left;
            width: 50px;
            height: 25px;
            line-height: 40px;
          }
        }
      }
    }
  }
  .b_list_4{
    width: 375px;
    height: 1200px;
    z-index: 666;
    position: absolute;
    .bottom-newnav{
      width: 375px;
      height: 90px;
      display: flex;
      justify-content: space-between;
      text-align: center;
      line-height: 13px;
      .newnav{
        width: 25%;
        height: 90px;
        .iconfont{
          font-size: 55px;
          line-height: 70px;
        }
        .newnav>div{
          width: 100%;
          height: 20px;

        }
      }
    }
    .new_br{
      width: 100%;
      height: 10px;
      background-color: darkgray;
    }
    .b_list4{
      height: 30px;
      line-height: 30px;
      margin-left: 10px;
      width: 355px;
    }
    .bl_4{
      width: 100%;
      height: 70px;
      .bl_4t{
        width: 355px;
        height: 49px;
        margin-left: 10px;
      }
      .bl_4b{
        width: 50px;
        float: right;
        margin-right: 10px;
        text-align: center;
      }
    }
  }
  .b_list_5{
    width: 375px;
    height: 1200px;
    z-index: 555;
    position: absolute;
    .b_list5{
      width: 375px;
      height: 25px;
      background-color: darkgray;
      .b_list5_today{
        width: 150px;
        height: 25px;
        line-height: 25px;
      }
    }
    .list-time{
      float: left;
      width: 50px;
      height: 700px;
    }
    .list5-message{
      float: left;
      width: 322px;
      height: 700px;
      .lm5{
        width: 322px;
        height: 100px;
        .lm5_t{
          width: 312px;
          height: 70px;
          P{
            margin-top: 10px;
          }
        }
        .lm5_b{
          width: 322px;
          height: 30px;
          .iconfont{
            float: right;
            margin-right: 5px;
            line-height: 30px;
          }
        }
      }
    }
  }




.footer{
  width: 100%;
  bottom: 0;
  height: 50px;
  display: flex;
  position: fixed;
  justify-content: space-between;
  background: #f0f0f0;
  .foot{
    width: 18%;
    height: 50px;
    text-align: center;
  }

}
}


